<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>组件的基本使用</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        Vue中使用组件的三大步骤
            一：定义组件（创建组件）
            二：注册组件
            三：使用组件（编写组件标签）
        一：如何定义一个组件？
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：
                区别如下：
                    一：el不要，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器。
                    二：data必须写函数，避免组件被服用时，数据存在引用关系。
                备注：使用template可以配置组件结构。
        二：如何注册组件
                一：局部注册：靠 new Vue的时候传入components选项。
                二：全局注册：靠 Vue.component('组件名',组件)
        三：编写组件标签：
                <hello></hello>
     -->

    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 全局组件 -->
        <hello></hello>
        <h2>{{message}}</h2>
        <hr/>
        
        <!-- 第三步 编写组件标签 -->
        <xuexiao></xuexiao>
                <!-- 全局组件 -->
                <hello></hello>
        <hr/>
        <!-- 第三步 编写组件标签 -->
        <xuesheng></xuesheng>
        <hr/>
        <xuexiao></xuexiao>
                <!-- 全局组件 -->
                <hello></hello>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        // 第一步创建hello组件
        const hello = Vue.extend({
            template: `
            <div>
                <h2>你好啊! {{name}}</h2>
            </div>
            `,
            data(){
                return{
                    name:'李四'
                }
            }
        })

        // 第二步，注册全局组件
        Vue.component('hello', hello)

        // 第一步：创建组件
        const school = Vue.extend({
            // el:'#root'   //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务

            template: `
                <div>
                    <h2>学校名称: {{schoolName}}</h2>
                    <h2>学校地址: {{address}}</h2>
                    <button @click="showSchoolName">点我显示学校名</button>
                </div>
            `,
            data() {
                return {
                    schoolName: '宋营小学',
                    address: '河南省商丘市睢阳区'
                }
            },
            methods: {
                showSchoolName(){
                    alert(this.schoolName)
                }
            }
        })
        // 第一步：创建组件 
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生名称: {{name}}</h2>
                    <h2>学生年龄: {{age}}</h2>
                </div>
            `,
            data() {
                return {
                    name: '徐亚远',
                    age: 9
                }
            }
        })

        const vm = new Vue({
            el: '#root',
            data:{
                message: '你好呢！！'
            },
            // 第二步：注册组件(局部注册)
            components: {
                xuexiao: school,
                xuesheng: student
            }

        })
    </script>


</body>

</html>